<template>
  <el-dropdown @command="handleCommand">
    <span class="el-dropdown-link">
      <el-icon><Setting /></el-icon> 系统设置
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
            v-for="item in menuItems"
            :key="item.action"
            :command="item.action"
        >
          {{ item.text }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script>
import {Setting} from "@element-plus/icons-vue";

export default {
  components: {Setting},
  data() {
    return {
      menuItems: [
        { text: '个人资料', action: 'edit-profile' },
        { text: '隐私设置', action: 'privacy-settings' },
        { text: '账号安全', action: 'security-settings' }
      ]
    }
  },
  methods: {
    handleCommand(action) {
      console.log('执行:', action);
      // 根据action执行不同操作
    }
  }
}
</script>

<style>
.el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}
</style>
